<template>
	<view class="wrap">
		<home-title title="获得奖品" type="2"></home-title>
		
		
		<u-scroll-list :indicator="false">
			<view class="container">
				<view class="item"  v-for="(item, index) in prizeList" :key="index">
					<view class="p_item">
						<image style="width: 109rpx;height: 122rpx;margin: 0 15rpx;min-width: 109rpx;" :src="item.peerUrl" mode="scaleToFill"></image>
						
						<text style="font-size: 22rpx;color: #333;margin-right: 15rpx;">{{filterNull(item.name)}}</text>
					</view>
					
					
				</view>
			</view>
		</u-scroll-list>
		
		
		
		<!-- <view class="prize" v-for="(item, index) in prizeList" :key="index">
			<image class="prize_img" :src="item.peerUrl" mode=""></image>
			<view class="prize_info">
				<text class="prize_info_team">{{item.peerNumber}}人组,{{item.peerGive}}人可获得奖品</text>
				<text class="prize_info_name">{{item.name}}</text>
				<view class="prize_info_time">
					<text class="time">{{item.orderTime}}组队成功</text>
					<image class="success" src="../../static/activity/check_success.png" mode=""></image>
				</view>
			</view>
		</view> -->
		
		
	</view>
</template>

<script>
	import homeTitle from '../layout/mmv-home-title.vue'
	export default {
		name: 'detail-alreadyPrize',
		components: {
			homeTitle,
		
		},
		mounted() {
			console.log(this.prizeList);
		},
		props: {
			
			prizeList: {
				type: Array,
				default() {
				  return []
				}
			},
			
			//奖品图片
			prizeSrc: {
				type: String,
				default: ''
			},
			//奖励信息
			teamAwardInfo: {
				type: String,
				default: ''
			},
			//奖品名称
			prizeName: {
				type: String,
				default: ''
			},
			//组队成功时间
			successTime: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
	  margin-top: 30upx;
	}
	.prize {
		display: flex;
		// width: 100%;
		background-color: #FFF;
		border-radius: 16upx;
		height: 260upx;
		position: relative;
		&_img {
			width: 180upx;
			height: 180upx;
			margin: 20upx;
			border:  1upx solid #F3F3F3;
			border-radius: 8upx;
		}
		&_info {
			display: flex;
			flex-direction: column;
			margin-left: 60upx;
			justify-content: flex-start;
			
			&_team {
				margin-top: 28upx;
				color: #fff;
				font-size: 18upx;
				padding: 10upx 15upx;
				background: linear-gradient(0deg,#ffb244 0%, #ffd58e 100%);
				border-radius: 20upx 0 20upx 0;
			}
			&_name {
				margin-top: 30upx;
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: bold;
				text-align: left;
				color: #232323;
			}
			&_time {
				margin-top: 12upx;
				display: flex;
				align-items: center;
			}
		}
	}
	.time {
		color: #999;
		font-size: 22upx;
	}
	.success {
		margin-left: 4upx;
		width: 22upx;
		height: 22upx;
	}
	
	.container {
		display: flex;
		justify-content: space-between;
		.item {
			margin: 0 9upx;
			padding-bottom: 0;
		}
		
		.p_item{
			border-radius: 20rpx;
			width: 334rpx;
			height: 160rpx;
			background-color: white;
			@include flex;
			align-items: center;
		}
		
	}
</style>
